<template>
  <div class="super-flow-base-demo" :style="{ '--width': maxWidth, '--height': maxHeight }">
    <SuperFlow
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :node-menu="nodeMenuList"
      :linkAddable="false"
      :draggable="false"
    >
      <template #node="{ meta }">
        <slot name="node" :meta="meta" />
      </template>
    </SuperFlow>
  </div>
</template>

<script>
import SuperFlow from "vue-super-flow";
import "vue-super-flow/lib/index.css";

export default {
  name: "MySuperFlow",
  components: {
    SuperFlow,
  },
  props: {
    nodeList: {
      type: Array,
      required: true,
    },
    //startAt: [0, 0]=》上    [0, >100]=》下（100为盒子高度 大于100则下小于等于则上）    [0, <100]=》左   [>=160，0]=》右 （160为盒子宽度 大于等于160则右小于则下）
    linkList: {
      type: Array,
      required: true,
    },
    nodeMenuList: {
      type: Array,
      default() {
        return [
          [
            {
              label: "查看",
              selected: (node, coordinate) => {
                console.log(node);
                this.$emit("onMenuItemViewClick", node.meta);
              },
            },
          ],
        ];
      },
    },
  },
  emits: ["onMenuItemViewClick"],
  data() {
    return {
      maxWidth: "0px",
      maxHeight: "0px",
    };
  },
  watch: {
    nodeList: {
      handler(val) {
        val.map((item) => {
          item.width = item.meta.name == "none" ? "0" : "160";
          item.height = item.meta.name == "none" ? "0" : "100";
          item.meta.id = item.id;
        });
        const maxWidthNode = `${
          Number(Math.max(...this.nodeList.map((item) => item.coordinate[0]))) +
          Number(Math.max(...this.nodeList.map((item) => item.width))) +
          100
        }px`;
        const maxHeightNode = `${
          Number(Math.max(...this.nodeList.map((item) => item.coordinate[1]))) +
          Number(Math.max(...this.nodeList.map((item) => item.height))) +
          100
        }px`;
        this.maxWidth = maxWidthNode;
        this.maxHeight = maxHeightNode;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
}

.ellipsisMore {
  /* 弹性伸缩盒子模型 */
  display: -webkit-box;

  /* 超出部分隐藏 */
  overflow: hidden;

  /* 文本超出时，显示省略标记 */
  text-overflow: ellipsis;

  /* 子元素排列方式为垂直 */
  -webkit-box-orient: vertical;

  /* 子元素呈现3行 */
  -webkit-line-clamp: 2;
}

.super-flow-base-demo {
  width: 100%;
  height: 100%;
  overflow: auto;
  // margin: 0 auto;
  background-color: #f5f5f5;

  .super-flow {
    width: var(--width);
    height: var(--height);
    margin: 0 auto;
  }

  ::v-deep .super-flow__node:has(> .none-flow) {
    display: none;
    background: transparent;
    border: none;
    box-shadow: none;
  }
}
</style>
